<script setup lang="ts">
import {
  apiCollectAdd,
  apiCollectDel,
  appCommentAdd,
  appCommentList,
  appCommentDel,
} from "@/apis/collect";
import { apiAddFollow } from "@/apis/my";
import {
  apiProductAuth,
  apiProductDetails,
  apiProductEdit,
  apiProductRemove,
  apiUpTj
} from "@/apis/product";
import {
  apiAuthentication,
} from "@/apis/shop";
import { getMediaUrl, router, toast } from "@/utils/tools";
import { onLoad } from "@dcloudio/uni-app";
import { onShow } from "@dcloudio/uni-app";
import _default from "pinia-plugin-persistedstate";
import { ref, reactive, onMounted, watch, watchEffect, computed, toRefs } from "vue";
import { useUserStore } from "@/stores/user";
import { isImg } from "@/utils/tools";
import { onReachBottom } from "@dcloudio/uni-app";
import moment from "moment";
import tCropper from '@/components/t-cropper/components/t-cropper/t-cropper.vue';
import { uploadImg } from "@/utils/request";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

moment.defineLocale("zh-cn", {
  relativeTime: {
    future: "%s内",
    past: "%s前",
    s: "几秒",
    m: "1分钟",
    mm: "%d分钟",
    h: "1小时",
    hh: "%d小时",
    d: "1天",
    dd: "%d天",
    M: "1个月",
    MM: "%d个月",
    y: "1年",
    yy: "%d年",
  },
});
let fixed = ref(false);
let titleValue = ref("我的奇石");
let showCrpper = ref(false) // 图片裁剪弹窗是否显示
const userStore = useUserStore();
const noScroll = ref(false);
const qrcode2 = ref();
const detailId = ref(0);
const productDetail = reactive<any>({
  qrcode: "https://www.stoneplayer.com/yuehui/index.html",
});
const pageNum = ref(1);
const pageSize = ref(10);
const isMore = ref(false);
const commonList = ref([]);
const commonTotal = ref(0);
const imgwh = reactive({
  w: 0,
  h: 0,
});
const replyUser = reactive({
  userName: "",
  userId: "",
});
const model = reactive({
  imageUrl: "",
  resultUrl: [],
});//图片裁切参数
const { resultUrl, imageUrl } = toRefs(model);
let titleText = ref('') //上一页的标题
// const productQrcodeContent = reactive({
//   titlle: '',
//   describes: '',
//   images: '',
//   types: '',
//   brand: '',
//   fineness: '',
// });
const productQrcodeContent = ref();
let popup = ref({}); // state 1-待上架 2-在售  3-已售 4-下架 5-收藏
// 删除弹窗
const validatePopup = ref(false);
// 平台已认证弹窗
const attestationPopup = ref(false);
// 管理弹窗
let managePopup = ref(true);
const noticePopup = ref(false);
const viewImgPopup = ref(false);
const isCompltete = ref(false);
const qrcode = ref(null);
let viewImgUrl = ref("");
let qrcodeOptions = ref({
  margin: 10,
});
//类型 是从个人中心还是首页跳转
let type = ref("index");
let shareDetailId = ref(0);
// onReady() {}
// 详情a
const getDetail = async () => {
  let appUserId = null;
  if (userStore.userInfo === undefined) {
    appUserId = null;
  } else {
    appUserId = userStore.userInfo.id;
  }
  console.log('appUserId',appUserId);
  let res = await apiProductDetails({
    id: detailId.value,
    appUserId: appUserId,
  });
  if (res.code == 500) {
    toast("系统错误");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
  }
  Object.assign(productDetail, res.data);
  // treasure=1是珍宝阁  recommend=1 是推荐  authentication=1  认证榜
  // 如果 即使推荐榜 也是认证榜的   优先显示推荐榜
  if (res.data && res.data.recommend == 1) {
    titleValue.value = "推荐榜";
  }
  if (res.data && res.data.authentication == 1) {
    titleValue.value = "认证榜";
  }
  productDetail.images = productDetail.images?.split(",");
  productDetail.videos = productDetail.videos?.split(",")?.filter(Boolean);
  productDetail.dict = JSON.parse(productDetail.dict);
  productDetail.counts = [
    productDetail.leng && {
      key: productDetail.leng + "cm",
      label: "长",
    },
    productDetail.wide && {
      key: productDetail.wide + "cm",
      label: "宽",
    },
    productDetail.heg && {
      key: productDetail.heg + "cm",
      label: "高",
    },
    productDetail.weight && {
      key: productDetail.weight + "kg",
      label: "重量",
    },
  ].filter(Boolean);
  productDetail.dict2 = [
    ...(productDetail.dict || []),
    productDetail.leng && {
      name: productDetail.leng ? productDetail.leng + "cm" : "",
      fieldName: "长",
    },
    productDetail.wide && {
      name: productDetail.wide ? productDetail.wide + "cm" : "",
      fieldName: "宽",
    },
    productDetail.heg && {
      name: productDetail.heg ? productDetail.heg + "cm" : "",
      fieldName: "高",
    },
    productDetail.weight && {
      name: productDetail.weight ? productDetail.weight + "kg" : "",
      fieldName: "重量",
    },
  ].filter(Boolean);
};
const handleComplete = (e: any) => {
  isCompltete.value = e.success;
};
const handleSaveQrcode = (e: any) => {
  if (false === isCompltete.value) {
    toast("二维码未加载完成！");
    return false;
  }

  qrcode.value.save({
    success: (res: any) => {
      if (res.errMsg == "saveImageToPhotosAlbum:ok") {
        toast("保存成功！");
        return false;
      }
    },
  });
  // isCompltete.value = e.success;
};

// 关注
const handleFollow = async () => {
  if (!isLoginChange()) {
    return;
  }
  // 防抖
  uni.$uv.debounce(addFollow(), 500);
};
const addFollow = async () => {
  let res = await apiAddFollow({
    appFollowId: productDetail.appUserId,
  });

  if (res.code == 200) {
    toast("关注成功！");
    getDetail();
  }
};
const handleDetail = () => {
  router(
    `/pagesMerchand/store?shopId=${productDetail.appUserId}&userId=${productDetail.id}`
  );
};
const getCommentList = async () => {
  let res = await appCommentList({
    sourceId: productDetail.id,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
  if (res.code == 200) {
    commonTotal.value = res.total;
    if (res.rows.length < 10) {
      isMore.value = true;
    }
    commonList.value.push(...res.rows);
  }
};
const resetComment = () => {
  pageNum.value = 1;
  pageSize.value = 10;
  isMore.value = false;
  commonList.value = [];
};

const getUrlParam = (name, url) => {
  var query = url.substring(url.indexOf('?') + 1);
  var vars = query.split('&');
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=');
    if (pair[0] == name) {
      return pair[1];
    }
  }
  return false;
}
// 裁剪确认
const onConfirm = (res) => {
  console.log('裁剪==========', res)
  // 设置url的值，显示控件
  handleUploadMedia(res.tempFilePath)
  model.imageUrl = "";
  showCrpper.value = false;
};
const artworkConfirm = (res) => {
  console.log('裁剪==========2', res)
  getApiAuthentication(productDetail.images[0])
}
// 关闭裁剪
const onCancel = () => {
  model.imageUrl = "";
};
const handleUploadMedia = async (url) => {
  let resUpload = await uploadImg(url);
  await getApiAuthentication(resUpload.data.url)
  console.log('裁剪==========2', resUpload.data.url)
};
onShow(async () => {
  // await getDetail();
  // resetComment();
  // await getCommentList();
  if (uni.getStorageSync("shareDetailId")) {
      setTimeout(async() => {
        console.log('userStore.userInfo',userStore.userInfo);
        await getDetail();
        resetComment();
        await getCommentList();
      }, 1000);
    } else {
      await getDetail();
      resetComment();
      await getCommentList();
    }
});
onLoad(async (options: any) => {
  console.log('options', options)
  titleText.value = options.title
  if (options.title && options.title == '认证榜') {
    titleValue.value = options.title;
  } else if (options.title && options.title == '推荐榜') {
    titleValue.value = options.title;
  } else {
    titleValue.value = '我的奇石'
  }
  let optionsId = getCurrentPages()[0].options;
  uni.setStorageSync("inviterId", optionsId?.inviterId);
  uni.setStorageSync("shareDetailId", optionsId?.id);
  uni.setStorageSync("shareTitle", optionsId?.title);

  if (options) {
    if (uni.getStorageSync("shareDetailId")) {
      setTimeout(async() => {
        console.log('userStore.userInfo',userStore.userInfo);
        detailId.value = options.id ?? "";
        // await getDetail();
        // resetComment();
        // await getCommentList();
      }, 1000);
    } else {
      detailId.value = options.id ?? "";
      // await getDetail();
      // resetComment();
      // await getCommentList();
    }
    detailId.value = options.id ?? "";
    type.value = options.type ?? "index";
    // getDetail();
    if (options.q) {
      const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
      detailId.value = getUrlParam('id', q)
      console.log(q, 'decodeURIComponent')
    }
  }
});

onReachBottom((e: any) => {
  if (isMore.value) return;
  pageNum.value++;
  getCommentList();
});

const isLoginChange = () => {
  if (!uni.getStorageSync("token")) {
    router("/pages/login/login");
    return false;
  } else {
    return true;
  }
};

const handleLook = async () => {
  // let productDetailBase64 = btoa(JSON.stringify(productDetail));
  // attestationPopup.value.open(true);

  let data = {
    title: productDetail.title,
    describes: productDetail.describes,
    images: productDetail.images,
    brand: productDetail.brand,
    fineness: productDetail.fineness,
    types: productDetail.types,
  };

  productQrcodeContent.value = JSON.stringify(data);

  // Object.assign(productQrcode, data);
  uni.navigateTo({
    url: `/pagesMy/backdrop/backdrop?orderId=${productDetail.id}`,
  });
};
const handleAddCollect = async () => {
  if (!isLoginChange()) {
    return;
  }
  if (productDetail.collect) {
    // toast("您已收藏！");
    let res1 = await apiCollectDel({ commodityId: productDetail.id });
    if (res1.code == 200) {
      getDetail();
      toast("取消收藏成功！");
    }
    return false;
  }
  let res = await apiCollectAdd({ commodityId: productDetail.id });
  if (res.code == 200) {
    getDetail();
    toast("收藏成功！");

    return false;
  }
};

const byClick = () => {
  console.log('titleText.value', titleText.value);
  console.log('userStore.userInfo.id ', userStore.userInfo.id);
  console.log('productDetail.appUserId', productDetail.appUserId);
  if (titleText.value == '珍宝档案') {
    return
  }
  if (userStore.userInfo.id == productDetail.appUserId) {
    return
  }
  
  if (!isLoginChange()) {
    return;
  }
  uni.navigateTo({
    url: `/pagesOrder/order/confirmOrder?orderId=${productDetail.id}`,
  });
};
const bySameStyle = () => {
  if (titleText.value == '珍宝档案') {
    return
  }
  uni.switchTab({
    url: `/pages/publish/publish`,
  });
};
const handleProductAuth = async () => {
  // let res = await apiProductAuth({
  //   "shopGoodsId": productDetail.id, //商品ID
  //   "describes": productDetail.describes, //商品描述
  //   "images": productDetail.images.join(','), //藏品照片和视频
  //   "otherImages": "sdfsfdsdfds", //其他照片认证证书等
  //   "money": 10, //认证费用
  //   "comment": "" //专家认证评语
  // });
};
// 点击管理
const manageClick = () => {
  if (!isLoginChange()) {
    return;
  }
  managePopup.value.open(true);
};
// 藏品认证
const collectionClick = () => {
  uni.navigateTo({
    url: `/pagesMerchand/collection-certification`,
  });
};

const handleAuthentication = () => {
  if (
    type.value === "my" &&
    userStore.userInfo.id === productDetail.appUserId
  ) {
    // qrcode2.value.open();
    // if (productDetail.authentication == 1) {
    //   qrcode2.value.open();
    // } else {
    //   uni.navigateTo({
    //     url: `/pagesMerchand/collection-certification?productId=${productDetail.id}`,
    //   });
    // }
    if (productDetail.authentication) return;
    uni.navigateTo({
      url: `/pagesMerchand/collection-certification?productId=${productDetail.id}`,
    });
  }
};

// 编辑
const compileClick = () => {
  managePopup.value.close();
  uni.navigateTo({
    url: `/pagesMerchand/info-edit?id=${productDetail.id}`,
  });
};
// 推荐
const recommendClick = async (e: any) => {
  console.log('推荐了参数========', e)
  if (e == 1) {
    uni.showModal({
      title: '提示', // 提示框标题
      content: '上架推荐榜，平台收取奇石总价推荐费30%', // 提示框内容
      showCancel: true, // 是否显示取消按钮，默认为 true
      confirmText: '确定', // 确定按钮的文本
      cancelText: '取消', // 取消按钮的文本
      success: async (res) => {
        if (res.confirm) {
          console.log('用户点击了确定按钮');
          // 在这里处理确定后的逻辑
          let res = await apiUpTj({
            id: productDetail.id,
            recommend: e //0-取消推荐  1-推荐
          })
          console.log('推荐了========qingqiu', res)
          toast(res.msg);
          // setTimeout(async() => {
          //   await getDetail();
          //   resetComment();
          //   await getCommentList();
          // }, 1000);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        } else if (res.cancel) {
          console.log('用户点击了取消按钮');
          // 在这里处理取消后的逻辑
        }
      }
    });
  } else {
    uni.showModal({
      title: '提示', // 提示框标题
      content: '确定要取消推荐吗？', // 提示框内容
      showCancel: true, // 是否显示取消按钮，默认为 true
      confirmText: '确定', // 确定按钮的文本
      cancelText: '取消', // 取消按钮的文本
      success: async (res) => {
        if (res.confirm) {
          console.log('用户点击了确定按钮');
          // 在这里处理确定后的逻辑
          let res = await apiUpTj({
            id: productDetail.id,
            recommend: e //0-取消推荐  1-推荐
          })
          console.log('推荐了========qingqiu', res)
          toast(res.msg);
          // setTimeout(async () => {
          //   await getDetail();
          //   resetComment();
          //   await getCommentList();
          // }, 1000);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        } else if (res.cancel) {
          console.log('用户点击了取消按钮');
          // 在这里处理取消后的逻辑
        }
      }
    });
  }

}
// 下架
const handleOut = async (state) => {
  // uni.navigateTo({
  //   url: `/pagesMerchand/info-edit?id=${productDetail.id}`
  // })
  let res = await apiProductEdit({ id: productDetail.id, state });

  if (res.code == 200) {
    getDetail();
    toast(state === 4 ? "下架成功！" : "上架成功！");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
    return false;
  }
};
// 删除
const handleDelete = async () => {
  let res = await apiProductRemove({ id: productDetail.id });
  if (res.code == 200) {
    uni.navigateBack({
      delta: 1,
    });
    return false;
  }

  // uni.navigateTo({
  //   url: `/pagesMerchand/info-edit?id=${productDetail.id}`
  // })
};
// 认证
const getAuthentication = async () => {
  managePopup.value.close();
  if (productDetail.images && productDetail.images[0]) {
    model.imageUrl = productDetail.images[0];
    showCrpper.value = true;
    console.log('showCrpper')
  } else {
    getApiAuthentication('')
  }
}
const getApiAuthentication = async (url) => {
  let res = await apiAuthentication({
    id: productDetail.id,
    authentication: 2,
    promotional: url
  });
  if (res.code == 200) {
    toast("提交成功");
    setTimeout(function () {
      managePopup.value.close();
      uni.navigateTo({
        url: '/pagesMerchand/auth-list',
      })
    }, 1500);
  } else {
    toast(res.msg);
  }
}
const change = (e: any) => {
  noScroll.value = e.show;
};

const isFlag = computed(() => {
  // 认证 显示
  if (productDetail.authentication === 1) {
    return true;
  }
  // 收藏 不显示

  // 已售 不显示
  if (productDetail.state === 3) {
    return false;
  }
  return true;
});
const getClassWrap = () => {
  return ["img-wrapper", `len${productDetail?.images?.length}`];
};
const handleRenzhen = () => {
  // 已售不做处理
  // if (productDetail.state === 3) {
  //   return;
  // }
  if (productDetail.authentication == 1) {
    handleLook();
  } else {
    handleAuthentication();
  }
};
const handleguize = () => {
  noticePopup.value.open(true);
};
const closehandleguize = () => {
  noticePopup.value.close();
};
const getQrcodeShow = () => {
  // if (type.value === "my") {
  //   return true;
  // }

  return productDetail.authentication == 1;
};

const handleViewImg = (src) => {
  viewImgUrl.value = src;
  uni.getImageInfo({
    src,
    success: (res) => {
      imgwh.w = res.width;
      imgwh.h = res.width;
      viewImgPopup.value.open(true);
    },
  });
  // viewImgPopup.value.open(true);
};
const previewImage = (index) => {
  uni.previewImage({
    current: index, // 当前显示图片索引
    urls: productDetail.images, // 需要预览的图片http链接列表
  });
};
const handleEnterPress = async (e) => {
  const content = productDetail.msg;
  if (!content) {
    return toast("请输入留言");
  }
  const data = {
    sourceId: productDetail.id,
    appUserId: userStore.userInfo.id,
    appConsumptionId: replyUser.userId || productDetail.appUserId,
    objectUser: replyUser.userName || productDetail.userName,
    content,
    appUserName: userStore.userInfo.userName,
    appUserImage: userStore.userInfo.headSculpture,
  };
  let res1 = await appCommentAdd(data);
  if (res1.code == 200) {
    toast("留言成功");
    productDetail.msg = "";
    resetComment();
    getCommentList();
  }
};
const getImgUrl = (url, idx) => {
  const len = productDetail?.images?.length;
  if (len === 1 || len === 2) {
    return getMediaUrl(url, 690, 687);
  }
  if (len === 3 || len === 4 || len === 6) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    return getMediaUrl(url, 345, 345);
  }
  if (len === 5) {
    if (idx === 1) {
      return getMediaUrl(url, 690, 687);
    }
    return getMediaUrl(url, 345, 345);
  }
  if (len === 7) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    if (idx === 3 || idx === 4) {
      return getMediaUrl(url, 345, 345);
    }
    return getMediaUrl(url, 230, 228);
  }
  if (len === 8) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    return getMediaUrl(url, 230, 228);
  }
  if (len === 9) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    if (idx === 3 || idx === 4 || idx === 5 || idx === 6) {
      return getMediaUrl(url, 345, 345);
    }
    return getMediaUrl(url, 230, 228);
  }

  return getMediaUrl(url);
};

const handleReply = (item) => {
  replyUser.userName = item.appUserName;
  replyUser.userId = item.appUserId;
};

const handleBlur = () => {
  replyUser.userName = "";
  replyUser.userId = "";
};

const delComment = async (id) => {
  let res1 = await appCommentDel({ id });
  if (res1.code == 200) {
    toast("删除成功");
    resetComment();
    getCommentList();
  }
};

const getPlaceholder = () => {
  if (replyUser.userName) {
    return "回复" + replyUser.userName;
  }
  return "还没有人留言，你来说两句～";
};

const deliveryFilter = computed(() => {
  return (delivery: any) => {
    if (delivery === 0) {
      return "包邮";
    } else if (delivery === 1) {
      return "不包邮";
    } else {
      return "自取";
    }
  };
});
// 打开分享
onShareAppMessage((e: any) => {
  // console.log("----分享----", e);
  return {
    title: "",
    path: `/pagesMerchand/stone-details?inviterId=${userStore.userInfo.id}&id=${detailId.value}&title=${titleValue.value}`,
  };
});
//分享到朋友圈
onShareTimeline((e: any) => {
  // console.log("----分享到朋友圈----", detailId.value);
  return {
    title: "",
    query: `inviterId=${userStore.userInfo.id}`,
    path: `/pagesMerchand/stone-details?inviterId=${userStore.userInfo.id}&id=${detailId.value}&title=${titleValue.value}`,
  };
});
// 返回
const leftClick = () => {
  if (uni.getStorageSync('shareDetailId')) {
    uni.reLaunch({
      url: `/pages/index/index`
    })
  } else {
    uni.navigateBack({ delta: 1 });
  }
};
onMounted(() => {
  // validatePopup.value.open(true);
  // attestationPopup.value.open(true);
});
</script>

<template>
  <view>
    <uv-navbar :title="titleValue" :fixed="fixed" @leftClick="leftClick"></uv-navbar>

    <view class="detail-wrapper" id="detail-wrapper" :class="!noScroll ? 'detail-wrapper' : 'noscroll'">
      <view class="video-wrapper" v-if="productDetail?.videos?.length">
        <video class="video" :src="productDetail?.videos?.[0]" />
      </view>
      <view class="box-1">
        <view class="info-boxs" @click="handleDetail">
          <view class="info-left">
            <image v-if="productDetail.headSculpture" :src="productDetail.headSculpture" class="img" />
            <image v-else src="@/static/images/avatar_default.png" class="img" />
          </view>
          <view class="info-right">
            <view class="right1">
              <view class="title">
                <text>{{ productDetail.shopName }}</text>
                <view class="shop-vip-level">
                  <image class="bx1" src="@/static/images/level-box.png" />
                  <image class="bx2" src="@/static/images/level-star.png" />
                  <text class="bx3">LV{{ productDetail.shopVip }}</text>
                </view>
              </view>
              <!-- <view class="sub-title">{{ productDetail.personalProfile }}</view> -->
              <!-- <view class="sub-title">
              <image class="bx1" src="@/static/images/level-box.png" />
              <image class="bx2" src="@/static/images/level-star.png" />
              <text class="bx3">LV{{ productDetail.shopVip }}</text>
            </view> -->
              <view class="sub-title">{{ productDetail.personalProfile }}</view>
            </view>
            <view class="right2" v-if="!productDetail.follow && type !== 'my'">
              <button @click.stop="handleFollow" class="follow">
                <image src="@/static/images/follow-add.png" />
                <text>关注</text>
              </button>
            </view>
          </view>
        </view>
        <view class="qishi-xuzhi" @click="handleguize">
          <view class="t1">
            <image src="@/static/images/qishixuzhi.png" />
          </view>
          <view class="t2">买前了解交易规则</view>
          <view class="t3">
            <image src="@/static/images/arrow1.png" />
          </view>
        </view>
        <!-- v-if="productDetail.state != 3" -->
        <view class="qishi-renzheng-wrapper" v-if="getQrcodeShow()">
          <view class="line321"></view>
          <view class="qishi-renzheng">
            <view class="left-approve">
              <image src="../static/images/qishirenzhen.png" />
            </view>
            <view class="right-approve">
              <!-- <image
            v-if="productDetail.authentication == 1"
            @click="handleLook"
            src="../static/images/qrcode.png"
            class="case1"
          />
          <text class="case2" v-else-if="productDetail.authentication == 2"
            >认证中...</text
          >
          <view v-else @click="handleAuthentication" class="no-auth">
            <image src="../static/images/arrow1.png" />
          </view> -->

              <!-- <text class="case2" v-if="productDetail.state == 2">认证中...</text>
          <text
            class="case2"
            v-if="productDetail.state == 4"
            @click="handleRenzhen"
            >申请认证</text
          >
          <image
            @click="handleRenzhen"
            src="../static/images/qrcode.png"
            class="case1"
            v-else
          />
          <view
            class="no-auth"
            v-if="productDetail.authentication != 1"
            @click="handleRenzhen"
          >
            <image src="../static/images/arrow1.png" />
          </view> -->

              <template v-if="productDetail.authentication === 0">
                <text class="case3" v-if="productDetail.state == 4" @click="handleRenzhen">申请认证</text>
                <view class="no-auth" @click="handleRenzhen">
                  <image src="../static/images/arrow1.png" />
                </view>
              </template>
              <template v-if="productDetail.authentication === 1">
                <image @click="handleRenzhen" src="../static/images/qrcode.png" class="case1" />
              </template>
              <template v-if="productDetail.authentication === 2">
                <text class="case3">认证中...</text>
              </template>
            </view>
          </view>
        </view>
        <view class="qishi-details-box">
          <view class="details-title">{{ productDetail.title }}</view>
          <view class="details-money">
            <view class="price-box">
              <text class="price-ico">￥</text>
              <text class="price-text">{{ productDetail.currentPrice }}</text>
              <text class="price-line"></text>
              <text class="price-delivery">{{
                deliveryFilter(productDetail.delivery)
                }}</text>
            </view>
            <view class="shoucang-box">
              <text>{{ productDetail.num }}人收藏</text>
            </view>
          </view>
          <!-- <view class="details-weizhi">
          <view class="left"></view>
          <view class="right">位置：{{ productDetail.address }}</view>
        </view> -->
        </view>
      </view>

      <view class="box-2">
        <!-- <view class="menu-title">{{
        productDetail?.dict?.map((o) => o.fieldName).join("、")
      }}</view>
      <view class="menus-wrapper">
        <view
          class="item-menu"
          v-for="(item, idx) in productDetail.dict"
          :key="item"
          :style="{
            textAlign:
              idx === 0
                ? 'left'
                : idx === productDetail.dict?.length - 1
                ? 'right'
                : 'center',
            width: 100 / productDetail.dict?.length + '%',
          }"
        >
          <view class="menu-t1">{{ item.fieldName }}</view>
          <view class="menu-t2">{{ item.name }}</view>
          <view
            class="line"
            v-if="idx !== productDetail.dict?.length - 1"
          ></view>
        </view>
      </view>

      <view class="count-title" v-if="productDetail?.counts?.length"
        >尺寸/重量</view
      >
      <view class="count-wrapper" v-if="productDetail?.counts?.length">
        <view
          class="count-item"
          v-for="(item, idx) in productDetail.counts"
          :key="idx"
          :style="{
            width: 100 / productDetail.counts?.length + '%',
          }"
        >
          <view class="count-t1">{{ item.label }}</view>
          <view class="count-t2">{{ item.key }}</view>
          <view
            class="line"
            v-if="idx !== productDetail.counts?.length - 1"
          ></view>
        </view>
      </view> -->

        <view class="desc">{{ productDetail.describes }}</view>
        <!--  textAlign:
              productDetail.dict2.length === 2
                ? 'left'
                : idx === 0
                ? 'left'
                : idx === productDetail?.dict2.length - 1
                ? 'right'
                : 'center', -->
        <view class="count-wrapper2" v-if="productDetail?.dict2?.length">
          <view class="count-item" v-for="(item, idx) in productDetail.dict2" :key="idx" :style="{
            width: 100 / 6 + '%',
          }">
            <view class="count-t1">{{ item.fieldName }}</view>
            <view class="count-t2">{{ item.name }}</view>
            <!-- <view class="count-t2">9999.99kg</view> -->
            <view class="line" v-if="idx !== productDetail.dict2?.length - 1"></view>
          </view>
        </view>

        <view :class="getClassWrap()" v-if="productDetail.images">
          <image class="img" v-for="(item, idx) in productDetail.images" :src="getImgUrl(item, idx + 1)" :key="item"
            @click="() => previewImage(idx)" />
        </view>
      </view>

      <!-- <view class="info-box">
      <view class="info-left">
        <image :src="productDetail.headSculpture" class="img" />
      </view>
      <view class="info-right">
        <view class="flex flex-between">
          <text @click="handleDetail">{{ productDetail.shopName }}</text>
          <button
            v-if="!productDetail.follow && type !== 'my'"
            @click="handleFollow"
            class="follow"
          >
            关注
          </button>
        </view>
        <view class="store-name crosswise">
          <image src="../static/images/shop-2.png" class="img" />
          <text class="text">{{ productDetail.personalProfile }}</text>
        </view>
      </view>
    </view> -->

      <!-- <view
      class="row-box approve-box crosswise-sp-noc"
      v-if="productDetail.state != 3"
    >
      <view class="left-approve">
        <text>平台认证：</text>
        <text class="state-text">{{
          productDetail.authentication == 1 ? "已认证" : "未认证"
        }}</text>
      </view>
      <view class="right-approve">
        <text v-if="productDetail.authentication == 1" @click="handleLook"
          >查看认证二维码</text
        >

        <text v-else-if="productDetail.authentication == 2">认证中...</text>
        <view v-else @click="handleAuthentication" class="no-auth">
          <image src="../static/images/arrow.png" />
        </view>
      </view>
    </view> -->

      <!-- <view class="row-box details-box">
      <view class="details-title">{{ productDetail.title }}</view>
      <view class="introduce-box">
        <view class="crosswise-sp margin-box">
          <view class="price-box">
            <text class="price-ico">￥</text>
            <text class="price-text">{{ productDetail.currentPrice }}</text>

          </view>
          <view class="gray-box">
            <text>{{ productDetail.num }}人收藏</text>
          </view>
        </view>
        <view class="gray-box">宝贝位置：{{ productDetail.address }}</view>
      </view>
      <view class="menu-list">
        <view
          class="menu-box flex flex-between"
          v-for="item in productDetail.dict"
        >
          <text>{{ item.fieldName }}:</text>
          <text class="red-box">{{ item.name }}</text>
        </view>
      </view>
      <view class="introd-text"></view>
      <view class="img-list" v-if="productDetail.images">
        <template v-for="item in productDetail.images">
          <image :src="item" mode="scaleToFill" />
        </template>
      </view>
    </view> -->

      <view class="liuyan">
        <view class="title">留言（{{ commonTotal }}）</view>

        <view class="main1">
          <view class="main">
            <image v-if="productDetail.headSculpture" :src="productDetail.headSculpture" />
            <image v-else src="@/static/images/avatar_default.png" />
            <input type="text" v-model="productDetail.msg" :placeholder="getPlaceholder()" @blur="handleBlur" />
          </view>
          <text class="search-btn" @click="handleEnterPress">发送</text>
        </view>
        <view class="comment-list">
          <view class="comment-item" v-for="(item, idx) in commonList" :key="idx">
            <image class="avatar" :src="item.appUserImage" @click="() => handleReply(item)" />
            <view class="com-box" @click="() => handleReply(item)">
              <view class="name">
                <text class="n1">{{ item.appUserName }}</text>
                <text class="n2">{{ moment(item.createTime).fromNow() }}</text>
              </view>
              <view class="content">
                <text v-if="item.appConsumptionId !== productDetail.appUserId">回复<text style="color: blue">@{{
                  item.objectUser
                    }}</text>:</text>
                <text>{{ item.content }}</text>
              </view>
              <!-- <text
              class="del"
              v-if="item.appUserId === userStore.userInfo.id"
              @click="() => delComment(item.id)"
              >删除</text
            > -->
            </view>
            <image class="del" id="comment-del" v-if="item.appUserId === userStore.userInfo.id"
              @click="() => delComment(item.id)" src="../static/images/comment-del.png" />
          </view>
        </view>
      </view>

      <view class="empty-bottom"></view>

      <view class="btn-box flex justify-between" v-if="type !== 'my'">
        <view class="collect-box flex align-center" @click="handleAddCollect">
          <image :src="productDetail.collect
            ? '../static/images/collect.png'
            : '../static/images/collect_ico.png'
            " />
        </view>
        <view class="handle-btn flex">
          <button @click="bySameStyle">卖同款</button>
          <button v-if="productDetail.state === 2" :class="['buy-btn', { 'btn-box-gray': titleText == '珍宝档案' },{'btn-box-gray': userStore.userInfo.id == productDetail.appUserId}]"
            @click="byClick()">
            购 买
          </button>
          <button v-if="productDetail.state !== 2">已售出</button>
        </view>
      </view>
      <view class="btn-box" v-if="type === 'my' && isFlag">
        <button @tap="manageClick()">管理</button>
      </view>
      <!-- 管理弹窗 -->
      <!-- recommend 0不推荐 1推荐  treasure 0否1是 -->

      <!-- recommend 0不推荐 1推荐  treasure 0否1是 -->
      <uv-popup ref="managePopup" mode="bottom" closeable="true" zoom="true" round="10">
        <view class="validate">
          <!-- <view class="manage-row" @tap="collectionClick()">藏品认证</view> -->
          <block v-if="productDetail.treasure !== 1">
            <view class="manage-row" @tap="compileClick()">编辑</view>
            <view class="manage-row" @tap="recommendClick(0)" v-if="productDetail.recommend == 1">取消推荐</view>
            <view class="manage-row" @tap="recommendClick(1)" v-else>推荐</view>
            <view class="manage-row" @click="() => handleOut(4)" v-if="productDetail.state === 2">下架</view>
            <view class="manage-row" @click="() => handleOut(2)" v-if="productDetail.state === 4">上架</view>
          </block>
          <block v-else>
            <view class="manage-row" @tap="compileClick()">编辑</view>

          </block>
          <view class="manage-row" @click="getAuthentication"
            v-if="productDetail.state !== 3 && productDetail.authentication == 0">认证</view>
          <view class="manage-row" @click="handleDelete">删除</view>
          <!-- <view class="manage-row">取消</view> -->
        </view>
      </uv-popup>

      <!-- 删除提醒弹出 -->
      <uv-popup ref="validatePopup" closeable="true" :customStyle="{ width: '650rpx', height: 'auto' }" zoom="true"
        round="10" @change="change">
        <view class="validate">
          <view class="icon flex flex-center">
            <view class="icon2 flex flex-center">
              <image src="@/static/images/alarm-warning-line.png" mode="scaleToFill" />
            </view>
          </view>
          <view class="title"> 删除提醒 </view>
          <view class="content">尊敬的用户，您好，删除后商品需要重新上传，请谨慎操作！</view>
          <view class="pop-btn flex flex-between">
            <button class="cancel">取 消</button>
            <button class="confirm-del">确认删除</button>
          </view>
        </view>
      </uv-popup>
      <!-- 会员已认证弹窗 -->
      <uv-popup ref="attestationPopup" closeable="true" :customStyle="{ width: '650rpx', height: 'auto' }" zoom="true"
        round="10" @change="change">
        <view class="validate">
          <view class="title-pop flex flex-align-center">
            <view class="head-img">
              <image src="@/static/images/alarm-warning-line.png" class="img" />
            </view>
            <view class="title-text flex flex-column">
              <text>平台已认证</text>
              <text>认证时间：{{ productDetail.updateTime }}</text>
            </view>
          </view>
          <view class="describe-box">{{ productDetail.title }}</view>
          <view class="qr-code">
            <!-- <image src="@/static/images/alarm-warning-line.png" class="img" /> -->

            <!-- <view class="flex justify-center img"> -->
            <view class="flex justify-center">
              <uv-qrcode @complete="handleComplete" :h5DownloadName="productDetail.title" :h5SaveIsDownload="true"
                ref="qrcode" size="550rpx"
                :value="`https:www.stoneplayer.com/#/pagesMerchand/land-details?id=${productDetail.id}`"
                :options="qrcodeOptions"></uv-qrcode>
            </view>
            <!-- </view>   -->
          </view>
          <view class="save-btn">
            <!-- #ifdef H5 -->
            <button>长按二维码保存</button>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <button @click="handleSaveQrcode">保存二维码</button>
            <!-- #endif -->
          </view>
        </view>
      </uv-popup>

      <uv-popup ref="noticePopup" mode="bottom" zoom="true" round="10" :closeable="false" @change="change">
        <view class="notice-wrapper">
          <view class="top">
            <view class="empty"></view>
            <view class="t1">
              <image src="@/static/images/qishixuzhi.png" />
            </view>
            <view class="t2"> 买前了解退货规则，保障你的交易权益 </view>
            <view class="t3" @click="closehandleguize">
              <image src="@/static/images/closed11.png" />
            </view>
            <view class="t4">
              <image src="@/static/images/xuzhi-bg.png" />
            </view>
          </view>
          <view class="bottom">
            <view class="title">
              <view class="title1"></view>
              <view class="title2">交易前须知</view>
            </view>
            <view class="sub-title">在购买前与卖家充分沟通，确认宝贝细节并达成一
              致，发货后不支持无理由退货</view>
          </view>
          <view class="bottom">
            <view class="title">
              <view class="title1"></view>
              <view class="title2">交易前须知</view>
            </view>
            <view class="sub-title">在购买前与卖家充分沟通，确认宝贝细节并达成一
              致，发货后不支持无理由退货</view>
          </view>
          <view class="btn" @click="closehandleguize">我知道了</view>
        </view>
      </uv-popup>

      <uv-popup ref="viewImgPopup" zoom="true" round="10" :closeable="false" @change="change">
        <view class="view-img">
          <image :src="getMediaUrl(viewImgUrl, imgwh.w, imgwh.h)"
            :style="{ width: imgwh.w + 'rpx', height: imgwh.h + 'rpx' }" />
        </view>
        <!-- <uv-album :urls="productDetail.images"></uv-album> -->
      </uv-popup>
      <!-- @artwork="artworkConfirm" -->
      <block v-if="showCrpper">
        <tCropper mode="fixed" :imageUrl="imageUrl" :width="1790" :height="1790" :delay="150" @cancel="onCancel"
          @confirm="onConfirm"></tCropper>
      </block>
    </view>
  </view>
</template>

<style lang="scss" scoped>
page {
  // padding: 24rpx 30rpx 200rpx;
  box-sizing: border-box;
  background: #ececec;
  overflow: scroll !important;
}

.detail-wrapper {
  height: calc(100vh - 160rpx);
  overflow-y: scroll;
  overflow-x: hidden;
}

.noscroll {
  position: fixed;
}

.video-wrapper {
  width: 750rpx;
  height: 750rpx;

  .video {
    width: 750rpx !important;
    height: 750rpx !important;
    // width: 100%;
    // height: 100%;
  }
}

.box-1 {
  width: 750rpx;
  background: #ffffff;

  .info-boxs {
    height: 136rpx;
    padding: 30rpx 30rpx 0 30rpx;
    display: flex;

    .info-left {
      width: 76rpx;

      .img {
        width: 76rpx;
        height: 76rpx;
        border-radius: 50%;
      }
    }

    .info-right {
      flex: 1;
      padding-left: 15rpx;
      display: flex;

      .right1 {
        flex: 1;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 26rpx;
        text-align: left;
        font-style: normal;

        .title {
          font-size: 26rpx;
          display: flex;

          .shop-vip-level {
            font-size: 24rpx;
            width: 93rpx;
            height: 32rpx;
            position: relative;
            margin-left: 10rpx;

            // left: 60rpx;
            // top: 0;
            .bx1 {
              width: 93rpx;
              height: 32rpx;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
            }

            .bx2 {
              width: 28rpx;
              height: 28rpx;
              position: absolute;
              top: 2rpx;
              left: 5rpx;
              z-index: 2;
            }

            .bx3 {
              position: absolute;
              top: 6rpx;
              left: 36rpx;
              z-index: 2;
              font-family: DingTalk, DingTalk;
              font-weight: normal;
              font-size: 20rpx;
              color: #941c0d;
              line-height: 20rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }

        .sub-title {
          font-size: 20rpx;
          margin-top: 16rpx;
          font-weight: 400;
          // width: 93rpx;
          height: 32rpx;
          position: relative;

          .bx1 {
            width: 93rpx;
            height: 32rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
          }

          .bx2 {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            top: 2rpx;
            left: 5rpx;
            z-index: 2;
          }

          .bx3 {
            position: absolute;
            top: 6rpx;
            left: 36rpx;
            z-index: 2;
            font-family: DingTalk, DingTalk;
            font-weight: normal;
            font-size: 20rpx;
            color: #941c0d;
            line-height: 20rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }

      .right2 {
        width: 122rpx;
        height: 60rpx;
        background: #f7f7f7;
        border-radius: 30rpx;

        .follow {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          line-height: 60rpx;
          font-style: normal;
          text-align: center;

          image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 8rpx;
          }
        }
      }
    }
  }

  .qishi-xuzhi {
    width: 690rpx;
    height: 98rpx;
    background: #f7f6f6;
    border-radius: 16rpx;
    // margin-top: 30rpx;
    margin-left: 30rpx;
    display: flex;
    padding: 33rpx 16rpx 33rpx 24rpx;

    .t1 {
      width: 209rpx;
      height: 29rpx;

      image {
        width: 100%;
      }
    }

    .t2 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #4d4c4c;
      text-align: left;
      font-style: normal;
      margin-left: 24rpx;
      margin-top: 3rpx;
    }

    .t3 {
      margin-left: 173rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }

  .qishi-renzheng-wrapper {
    position: relative;
    width: 690rpx;
    height: 98rpx;
    background: #f7f6f6;
    border-radius: 16rpx;
    // margin-top: 24rpx;
    margin-left: 30rpx;
    padding: 31rpx 17rpx 31rpx 29rpx;

    .line321 {
      width: 630rpx;
      height: 1rpx;
      background: #dddddd;
      position: absolute;
      top: 0;
      left: 30rpx;
    }
  }

  .qishi-renzheng {
    // width: 690rpx;
    // height: 98rpx;
    // background: #f7f6f6;
    // border-radius: 16rpx;
    // // margin-top: 24rpx;
    // margin-left: 30rpx;
    display: flex;

    // padding: 31rpx 17rpx 31rpx 29rpx;
    .left-approve {
      width: 163rpx;
      height: 36rpx;

      image {
        width: 100%;
      }
    }

    .right-approve {
      flex: 1;
      position: relative;

      .case1 {
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        top: -5rpx;
        right: 53rpx;
      }

      .case2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 26rpx;
        color: #212121;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        position: absolute;
        right: 0;
        top: 53rpx;
      }

      .case3 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 26rpx;
        color: #212121;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        position: absolute;
        right: 40rpx;
        top: 0;
      }

      .no-auth {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        right: 0;
        top: 0;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .qishi-details-box {
    margin: 30rpx;

    .details-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #212121;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }

    .details-money {
      display: flex;
      margin-top: 29rpx;

      .price-box {
        flex: 1;

        .price-ico {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 22rpx;
          color: #f52121;
          line-height: 22rpx;
          text-align: left;
          font-style: normal;
        }

        .price-text {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 48rpx;
          color: #f52121;
          line-height: 48rpx;
          letter-spacing: 1px;
          text-align: left;
          font-style: normal;
          margin-left: 4rpx;
        }

        .price-line {
          width: 1rpx;
          height: 20rpx;
          background: #cecece;
          margin-left: 15rpx;
          display: inline-block;
        }

        .price-delivery {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: rgba(51, 51, 51, 0.99);
          line-height: 26rpx;
          text-align: left;
          font-style: normal;
          margin-left: 13rpx;
        }

        .original-cost {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 26rpx;
          color: rgba(51, 51, 51, 0.99);
          line-height: 26rpx;
          text-align: left;
          font-style: normal;
          text-decoration-line: line-through;
          margin-left: 29rpx;
        }
      }

      .shoucang-box {
        width: 200rpx;
        height: 26rpx;
        font-family: OPPOSans, OPPOSans;
        font-weight: normal;
        font-size: 26rpx;
        color: #999999;
        line-height: 26rpx;
        text-align: center;
        font-style: normal;
        text-align: right;
      }
    }

    .details-weizhi {
      display: flex;
      margin-top: 33rpx;
      padding-bottom: 30rpx;

      .left {
        width: 26rpx;
        height: 26rpx;
        background: url("@/static/images/CursorAltPointerMouse@2x.png") no-repeat;
        background-size: 26rpx 26rpx;
        margin-right: 13rpx;
        margin-top: 8rpx;
      }

      .right {
        flex: 1;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #212121;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}

.view-img {
  // width: 100%;
  // height: 100%;
  // width: 600rpx;
  // image {
  //   width: 600rpx;
  //   height: 500rpx;
  // }
}

.box-2 {
  background: #ffffff;
  padding: 0 30rpx;
  margin-top: -30rpx;

  .menu-title {
    padding: 57rpx 0 60rpx 0;
  }

  .menus-wrapper {
    display: flex;

    .item-menu {
      position: relative;

      .menu-t1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 22rpx;
        font-style: normal;
      }

      .menu-t2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 30rpx;
        font-style: normal;
        margin-top: 23rpx;
      }

      .line {
        width: 1rpx;
        height: 50rpx;
        background: #c4c4c4;
        position: absolute;
        right: 0;
        top: 13rpx;
      }
    }
  }

  .count-title {
    padding: 66rpx 0 60rpx 0;
  }

  .count-wrapper {
    display: flex;

    .count-item {
      text-align: center;
      position: relative;

      .count-t1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 22rpx;
        font-style: normal;
      }

      .count-t2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 30rpx;
        font-style: normal;
        margin-top: 23rpx;
      }

      .line {
        width: 1rpx;
        height: 50rpx;
        background: #c4c4c4;
        position: absolute;
        right: 0;
        top: 13rpx;
      }
    }
  }

  .count-wrapper2 {
    display: flex;
    margin-top: 20rpx;
    margin-bottom: 20rpx;

    .count-item:nth-child(1) {
      // text-align: left;
      // text-indent: 0;
    }

    .count-item:nth-last-child(1) {
      // text-align: right;
    }

    .count-item {
      text-align: center;
      position: relative;

      // text-indent: 30rpx;
      .count-t1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 22rpx;
        color: #999999;
        line-height: 22rpx;
      }

      .count-t2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 22rpx;
        color: #222222;
        line-height: 22rpx;
        margin-top: 23rpx;
      }

      .line {
        width: 1rpx;
        height: 50rpx;
        background: #c4c4c4;
        position: absolute;
        right: 0;
        top: 13rpx;
      }
    }
  }

  .desc {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #212121;
    line-height: 54rpx;
    text-align: left;
    font-style: normal;
    // margin-top: 10rpx;
    padding-top: 33rpx;
    padding-bottom: 10rpx;
  }

  .img-wrapper {
    display: flex;
    flex-wrap: wrap;
    // width: 690rpx;
    padding-bottom: 31rpx;

    .img {
      box-sizing: border-box;
      border: 1rpx dashed#C4C4C4;
      border: 1rpx solid #fff;
    }
  }

  .len1,
  .len2 {
    .img {
      width: 690rpx;
      height: 687rpx;
    }
  }

  .len3 {
    .img:nth-child(1) {
      width: 690rpx;
      height: 687rpx;
    }

    .img:nth-child(2),
    .img:nth-child(3) {
      width: 345rpx;
      height: 345rpx;
    }
  }

  .len4 {

    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }

    .img:nth-child(3),
    .img:nth-child(4) {
      width: 345rpx;
      height: 345rpx;
    }
  }

  .len5 {
    .img:nth-child(1) {
      width: 690rpx;
      height: 687rpx;
    }

    .img {
      width: 345rpx;
      height: 345rpx;
    }
  }

  .len6 {

    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }

    .img {
      width: 345rpx;
      height: 345rpx;
    }
  }

  .len7 {

    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }

    .img:nth-child(3),
    .img:nth-child(4) {
      width: 345rpx;
      height: 345rpx;
    }

    .img {
      width: 230rpx;
      height: 228rpx;
    }
  }

  .len8 {

    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }

    .img {
      width: 230rpx;
      height: 228rpx;
    }
  }

  .len9 {

    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }

    .img:nth-child(3),
    .img:nth-child(4),
    .img:nth-child(5),
    .img:nth-child(6) {
      width: 345rpx;
      height: 345rpx;
    }

    .img {
      width: 230rpx;
      height: 228rpx;
    }
  }
}

.liuyan {
  width: 750rpx;
  background: #ffffff;
  margin-top: 20rpx;
  padding-bottom: 200rpx;

  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #212121;
    line-height: 30rpx;
    text-align: left;
    font-style: normal;
    padding: 43rpx 30rpx 60rpx 30rpx;
  }

  .main1 {
    position: relative;

    .search-btn {
      position: absolute;
      right: 30rpx;
      top: 0;
      z-index: 999;
      width: 120rpx;
      height: 62rpx;
      background: #ce4831;
      border-radius: 31rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 24rpx;
      text-align: center;
      font-style: normal;
      line-height: 62rpx;
    }
  }

  .main {
    display: flex;

    image {
      width: 62rpx;
      height: 62rpx;
      border-radius: 50%;
      margin-left: 30rpx;
    }

    input {
      // width: 602rpx;
      width: 466rpx;
      height: 62rpx;
      background: #efefef;
      border-radius: 31rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      line-height: 26rpx;
      text-align: left;
      font-style: normal;
      margin-left: 26rpx;
      padding-left: 25rpx;
    }
  }

  .comment-list {
    .comment-item:nth-child(1) {
      margin-top: 62rpx;
    }

    .comment-item {
      display: flex;
      padding: 0 32rpx;
      margin-top: 30rpx;
      position: relative;

      .avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
      }

      .com-box {
        flex: 1;
        padding-left: 20rpx;
        border-bottom: 1rpx solid #eaebed;
        // background: red;
        position: relative;

        .name {
          .n1 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #000000;
            line-height: 30rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .n2 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #999999;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20rpx;
          }
        }

        .content {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-top: 14rpx;
          padding-bottom: 36rpx;
        }
      }

      .del {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 26rpx;
        right: 37rpx;
      }
    }
  }
}

// .empty-bottom {
//   height: 150rpx;
// }

.notice-wrapper {
  width: 750rpx;
  height: 890rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;

  .top {
    width: 750rpx;
    height: 237rpx;
    background: linear-gradient(96deg, #ffffff 0%, #f7d7d2 100%);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    position: relative;

    .empty {
      height: 98rpx;
    }

    .t1 {
      width: 366rpx;
      height: 50rpx;
      margin-left: 30rpx;

      image {
        width: 366rpx;
        height: 50rpx;
      }
    }

    .t2 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      margin-top: 19rpx;
      margin-left: 30rpx;
    }

    .t3 {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      top: 22rpx;
      right: 30rpx;

      .image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .t4 {
      width: 202rpx;
      height: 141rpx;
      position: absolute;
      top: 85rpx;
      right: 11rpx;

      .image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .bottom {
    padding: 0 45rpx;
    margin-top: 40rpx;

    .title {
      display: flex;

      .title1 {
        width: 20rpx;
        height: 20rpx;
        background: #ffffff;
        border: 4rpx solid #000000;
      }

      .title2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #060606;
        line-height: 32rpx;
        text-align: left;
        font-style: normal;
        margin-left: 15rpx;
      }
    }

    .sub-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 49rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .btn {
    width: 614rpx;
    height: 100rpx;
    background: linear-gradient(90deg, #f35034 0%, #c7452f 100%);
    border-radius: 50rpx;
    margin-top: 110rpx;
    margin-left: 68rpx;
    text-align: center;
    line-height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    font-style: normal;
  }
}

.info-box {
  .info-left {
    margin-right: 20rpx;

    .img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 6rpx 6rpx 2rpx 0rpx rgba(0, 0, 0, 0.1);
    }
  }

  .info-right {
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    width: 100%;

    .follow {
      background: linear-gradient(0deg,
          rgba(191, 1, 3, 1),
          rgba(255, 84, 2, 1));
      width: 120rpx;
      height: 46rpx;
      font-size: 28rpx;
      font-weight: 600;
      border-radius: 6rpx;
      color: #ffffff;
      border: 0rpx solid rgba(187, 187, 187, 1);
    }

    .store-name {
      margin-top: 8rpx;

      .img {
        width: 27rpx;
        height: 27rpx;
        margin-right: 14.5rpx;
      }

      .text {
        font-size: 28rpx;
      }
    }
  }
}

.approve-box {
  margin-top: 24rpx;
  font-size: 28rpx;

  .left-approve {
    color: rgba(154, 154, 154, 1);

    .state-text {
      color: rgba(51, 51, 51, 1);
      font-size: 32rpx;
    }
  }

  .right-approve {
    .no-auth {
      min-width: 300rpx;
      text-align: right;
    }

    text {
      color: rgba(191, 1, 3, 1);
    }

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }
  }
}

.details-box {
  margin-top: 24rpx;

  .details-title {
    margin-bottom: 40rpx;
    padding-bottom: 27rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    border-bottom: 2rpx solid rgba(239, 239, 239, 1);
  }

  .introduce-box {
    margin-bottom: 30rpx;

    .margin-box {
      margin-bottom: 20rpx;
    }

    .price-box {
      .price-ico {
        color: rgba(243, 96, 78, 1);
        font-size: 24rpx;
      }

      .price-text {
        margin-right: 12rpx;
        color: rgba(243, 96, 78, 1);
        font-size: 40rpx;
      }

      .original-cost {
        text-decoration: line-through;
      }
    }

    .gray-box {
      color: rgba(206, 206, 206, 1);
      font-size: 24rpx;
    }
  }

  .menu-list {
    margin-bottom: 30rpx;

    .menu-box {
      margin-bottom: 10rpx;
      padding: 20rpx 30rpx;
      border-radius: 8rpx;
      background-color: rgba(239, 239, 239, 1);
      border: 0rpx solid rgba(187, 187, 187, 1);
      color: rgba(108, 108, 108, 1);
      font-size: 28rpx;

      .red-box {
        color: rgba(191, 1, 3, 1);
      }
    }
  }
}

.introd-text {
  margin-bottom: 30rpx;
  color: rgba(79, 79, 79, 1);
  font-size: 28rpx;
}

.img-list {

  image,
  video {
    width: 642rpx;
    height: 426.94rpx;
    margin-bottom: 5rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }
}

.btn-box {
  z-index: 999;

  // height: 104rpx;
  .collect-box {
    margin-top: 10rpx;
    margin-left: 34rpx;
    width: 48rpx;
    height: 85rpx;

    image {
      width: 48rpx;
      height: 85rpx;
    }
  }

  .handle-btn {
    button {
      width: 220rpx;
      height: 80rpx;
      background: #f4f5f7;
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 26rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
    }

    .buy-btn {
      background: linear-gradient(90deg, #ef5439 0%, #c7452f 100%);
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 26rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
      margin-left: 15rpx;
    }

    .btn-box-gray {
      background: #f4f5f7;
      color: #333333;
    }
  }
}

.validate {
  padding: 40rpx;

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }

  .pop-btn {
    margin-top: 61rpx;

    button {
      flex: 0.46;
      height: 80rpx;
      border-radius: 16rpx;
      background-color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
    }

    .cancel {
      border: 2rpx solid rgba(154, 154, 154, 1);
      color: rgba(79, 79, 79, 1);
    }

    .confirm-del {
      background: linear-gradient(180deg,
          rgba(255, 84, 2, 1) 0%,
          rgba(191, 1, 3, 1) 99%);
      color: rgba(255, 255, 255, 1);
    }
  }

  .title-pop {
    margin-bottom: 40rpx;

    .head-img {
      .img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 21rpx;
        border-radius: 50%;
      }
    }

    .title-text {
      text {
        color: rgba(16, 16, 16, 1);
        font-size: 24rpx;

        &:first-child {
          margin-top: 4rpx;
          font-size: 32rpx;
        }
      }
    }
  }

  .describe-box {
    margin-bottom: 20rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
  }

  .qr-code {
    width: 560rpx;
    height: 560rpx;
    margin-bottom: 80rpx;
    border: 2rpx solid rgba(206, 206, 206, 1);

    .img {
      width: 100%;
      height: 516rpx;
      border-radius: 12rpx;
      background-color: rgba(255, 255, 255, 1);
      border: 2rpx solid rgba(206, 206, 206, 1);
    }
  }

  .save-btn {
    button {
      height: 80rpx;
      line-height: 40rpx;
      border-radius: 50rpx;
      background: linear-gradient(0deg,
          rgba(191, 1, 3, 1) 0%,
          rgba(255, 84, 2, 1) 99.2%);
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Roboto;
      border: 0rpx solid rgba(187, 187, 187, 1);
    }
  }

  .manage-row {
    padding: 30rpx 0;
    border-bottom: 2rpx solid rgb(230, 229, 229);
    color: rgba(108, 108, 108, 1);
    font-size: 28rpx;
    text-align: center;

    &:last-child {
      border-bottom: 0;
      padding: 30rpx 0 0 0;
    }
  }
}
</style>
